<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>三列布局</title>
        <style>
            body{margin:0px;}
            #header{
                height:40px;
                background-color:#ccc;
            }
            #mainbody{
                width:1000px;
                background-color:pink;
                margin:0 auto;
                margin-top:10px;
                margin-bottom:10px;
               overflow:hidden;
            }
            #footer{
                width:1000px;
                height:100px;
                background-color:red;
                margin:0px auto;
            }
            div.left{
                width:200px;
                height:400px;
                background-color:yellow;
                float:left;
            }
            div.right{
                width:470px;
                height:400px;
                background-color:blue;
                float:left;
            }
            div.mid{
                width:300px;
                height:400px;
                background-color:green;
                float:left;
                margin:0 15px;
            }
        </style>
    </head>
    <body>
           <div id='header'></div>       <!--  头部   -->
           <div id='mainbody'>
                <div class='left'></div>
                <div class='mid'></div>
                <div class='right'></div>
                <div style='clear:both;'></div>
           </div>     <!--  身体   -->
           <div id='footer'></div>       <!--  脚丫子 -->
    </body>
</html>